<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<!--
1. Angular指令
	* Angular为HTML页面扩展的: 自定义标签属性或标签
	* 与Angular的作用域对象(scope)交互,扩展页面的动态表现力
2. 常用指令(一)
  * ng-app: 指定模块名，angular管理的区域
  * ng-model： 双向绑定，输入相关标签
  * ng-init： 初始化数据
  * ng-click： 调用作用域对象的方法（点击时）
  * ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
  * ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
  * ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
    * $index, $first, $last, $middle, $odd, $even
  * ng-show: 布尔类型， 如果为true才显示
  * ng-hide: 布尔类型， 如果为true就隐藏
-->

<body ng-app="myApp" >
<!--自动更新-->
<div ng-controller="MyController">
    <h2>价格计算器（自动）</h2>
    数量<input type="number" ng-model="num1">
    价格<input type="number" ng-model="price">
    <div>
        <span>价格是：</span>
        <span>{{num1 * price}}</span>
    </div>
</div>

<!--ng-click绑定按钮-->
<div ng-controller="MyController1">
    <h2>价格计算器(手动)</h2>
    数量 <input type="number" ng-model="num1">
    价格 <input type="number" ng-model="price">
    <button ng-click="calcu()">计算</button>
    <div>
        <span>总价是：</span>
        <span>{{total}}</span>
    </div>
</div>

<!--ng-bind解决数据闪屏问题-->
<div ng-controller="MyController2" >
    <span ng-bind="vari"></span>
</div>

<!--ng-repeat 遍历数组-->
<div ng-controller="MyController3">
    <ul >
        <li ng-repeat="person in persons">
            I am  {{person.name}} , my age is + {{person.age}}
        </li>
    </ul>
</div>



<script type='text/javascript' src='../../js/angular-1.5.5/angular.js'></script>
<script type='text/javascript'>
    angular.module('myApp',[])
        .controller('MyController',['$scope',function (aa) {
            aa.num1 = 1
            aa.price = 20
        }])
        .controller('MyController1',['$scope',function (aa) {
            aa.num1 = 1
            aa.price = 2
            aa.total = aa.num1 * aa.price
            aa.calcu = function () {
                aa.total = aa.num1 * aa.price
            }
        }])
        .controller('MyController2',['$scope',function (aa) {
            aa.vari = '3.14'
        }])
        .controller('MyController3',['$scope',function (aa) {
            aa.persons = [
                {name:'zzl',age:18}
                ,{name:'zzl2',age:18}
                ,{name:'zzl3',age:18}
                ,{name:'zzl4',age:18}
            ]
        }])
</script>

</body>
</html>